<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<style>
    .error{
        color:red;
    }
</style>
<ul class="right3_ul">
    <li class="topli" style="padding-left: 0"><a href="#">申请加盟</a></li>
    <li>
        <div class="post-content" style="margin-top: 10px">
            <form action="/apply" method="post" id="commentForm">
                <table class="pure-table pure-table-bordered post-info">
                    <tbody>
                    <tr>
                        <td>网站名称：</td>
                        <td><input type="text" name="title" style="border:1px solid #cbcbcb" required/></td>
                    </tr>
                    <tr>
                        <td>网站分类：</td>
                        <td>
                            <select id="category_id" name="category_id" required>
                                {{range $i, $v := .CateList}}
                                    {{$id :=  $v.ID|NumToStr}}
                                    <option value="{{$v.ID}}" {{if eq $v.ParentId 0}}disabled{{end}}>{{$v.Name}}</option>
                                {{end}}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>网站链接：</td>
                        <td><input type="url" name="url" style="border:1px solid #cbcbcb" required /></td>
                    </tr>
                    <tr>
                        <td>网站关键字：</td>
                        <td><input type="text" name="keywords" style="border:1px solid #cbcbcb" required/></td>
                    </tr>
                    <tr>
                        <td>网站描述：</td>
                        <td><textarea rows="3" cols="" style="border:1px solid #cbcbcb" name="desc" required></textarea></td>
                    </tr>
                    <tr>
                        <td>联系方式：</td>
                        <td><input type="text" name="tel" style="border:1px solid #cbcbcb" required/></td>
                    </tr>
                    <tr>
                        <td>验证码：</td>
                        <td><input type="text" name="captcha" style="border:1px solid #cbcbcb;width: 50px" required/>&nbsp;&nbsp;<img src="/captcha" alt="" width="100" height="40" id="captcha"/></td>
                    </tr>
                    <tr style="text-align: center">
                        <td colspan="2">
                            <input type="submit" name="提交" style="width: 50px"/>
                            <input type="reset" name="重置" style="width: 50px"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </li>
</ul>
<script>
    $(function () {
        $.get("/captcha",function (code) {
            $('#captcha').attr("src",code)
        })
        $('#captcha').click(function () {
            $.get("/captcha",function (code) {
                $('#captcha').attr("src",code)
            })
        });
    });
</script>

<script>
    $.validator.setDefaults({
        submitHandler: function() {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/apply" ,//url
                data: $('form').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.status == "success") {
                        alert("申请成功");
                        window.location = "/"
                    }else{
                        alert(result.data);
                    }
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    });
    $().ready(function() {
        $("#commentForm").validate();
    });
</script>